<template>
  <div>
    <el-tabs v-model="activeName" class="top-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in navList" :key="index" :name="item.value" :label="item.label" />
    </el-tabs>
    <div class="mainpd-20" style="margin-top: 60px; overflow: auto; height: calc(100vh - 340px)">
      <div class="search-card">
        <div v-if="activeName == 1" class="fr">
          <el-button :loading="loading" type="primary" plain @click="addBtns">新 建</el-button>
        </div>
        <!-- 搜索显示隐藏按钮 -->
        <el-button type="primary" class="search-button" @click="showMore = !showMore" />
        <div v-if="showMore" class="search-cards">
          <el-form :inline="true">
            <el-form-item>
              <el-input v-model="searchModel.value1" clearable placeholder="请输入分销商ID" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchBtn">搜 索</el-button>
              <el-button type="reset" @click="resetBtn">重 置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="table-card">
        <!-- 列表 -->
        <el-table ref="tableDataRef" v-loading="loading" :data="dataList" @sort-change="sortChange" @select="handleSelectionChange" @select-all="handleSelectionChange">
          <el-table-column show-overflow-tooltip :reserve-selection="true" type="selection" width="55" fixed />
          <el-table-column show-overflow-tooltip prop="name" label="分销商ID" fixed />
          <el-table-column show-overflow-tooltip label="操作" width="130px" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="lookBtn(scope.$index)">详情</el-button>
              <el-button v-if="activeName == 1" type="text" size="mini" @click="editBtn(scope.$index)"> 编辑 </el-button>
              <el-button v-if="activeName == 3" type="text" size="mini" @click="claimBtn(scope.$index)"> 认领 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-pagination t-center">
          <el-pagination :current-page.sync="searchModel.currentPage" :page-size.sync="searchModel.pageSize" :total="pageConfigTotal" background layout="total, sizes, prev, pager, next, jumper" style="margin-top: 10px" @size-change="getList" @current-change="getList" />
        </div>
      </div>
    </div>
    <!-- 组件 -->
    <!-- 新建编辑 -->
    <DrawerDetail ref="drawerDetail" @refresh="refresh" />
    <!-- 详情 -->
    <Details ref="details" @refresh="refresh" />
  </div>
</template>

<script>
import { internetApi } from '@/api/api'
const defaultModel = {
  currentPage: 1,
  pageSize: 10,
  value1: ''
}
export default {
  name: 'Workbench',
  components: {
    DrawerDetail: () => import('./drawerDetail'),
    Details: () => import('./dialogDetails')
  },
  data() {
    return {
      loading: false,
      navList: [
        { value: '1', label: '我的' },
        { value: '2', label: '预警中' },
        { value: '3', label: '可认领' }
      ],
      activeName: '1',
      searchModel: Object.assign({}, defaultModel),
      showMore: true,
      otherSelect: false,
      dataList: [],
      idList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // tab 切换
    handleClick(tab, event) {
      console.log(tab, event)
      console.log(this.activeName, 'activeName++++++++')
    },
    // 多选
    handleSelectionChange(val) {
      this.otherSelect = true
      this.idList = val.map((item) => {
        return item.id
      })
      if (this.idList.length === 0) {
        this.otherSelect = false
      }
    },
    // 清空已选
    clearSelection() {
      this.$refs.tableDataRef.clearSelection()
      this.idList.length = '0'
      this.otherSelect = false
    },
    // 查询
    searchBtn() {
      this.searchModel.currentPage = 1
      this.getList()
    },
    // 重置
    resetBtn() {
      this.searchModel = Object.assign({}, defaultModel)
      this.$refs.rengeSelect.range = 1
      this.searchBtn()
    },
    // 获取数据
    async getList() {
      this.loading = true
      const { data } = await this.$request(internetApi.getRoleList, Object.assign(this.searchModel))
      this.dataList = data.list || []
      this.pageConfigTotal = data.count
      this.loading = false
    },
    // 新建
    addBtns() {
      this.$refs.drawerDetail.show()
    },
    // 编辑
    editBtn(row) {
      this.$refs.drawerDetail.show(row)
    },
    // 查看
    lookBtn(row) {
      this.$refs.details.open(row)
    },
    // 刷新
    refresh() {
      setTimeout(() => {
        this.resetBtn()
      }, 100)
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}

.input-col {
  ::v-deep.el-form-item__content {
    width: 272px;
    height: 42px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    .el-input__inner {
      width: 120px !important;
      height: 40px !important;
      border: 0px !important;
    }
  }
}
</style>
